<template>
	<view class="i-seckill" :style="[paddingX]" v-if="goodsList.length">
		<view :style="[backgroundColor, borderRadius]" class="overflow-hidd">
			<view class="components-seckill-head-box e-flex e-flex-between" :style="[headStyle]"
				@tap="$goTo('/pages/seckill/seckill')">
				<view class="e-flex">
					<view class="components-seckill-head-title e-font-32 fw-600 e-m-r-40"
						:style="[{ color: option.headTitleTextColor }]">
						{{ option.headTitleText }}
					</view>
					<text class="e-font-24" :style="[{ color: option.headEndTextColor }]">{{ $t('layout.距离结束') }}</text>
					<view class="components-seckill-time-box text-center e-flex">
						<view :style="[{
								backgroundColor: option.headNumBgTextColor,
								color: option.headNumTextColor
							}]">
							{{ hours }}
						</view>
						<text :style="[{
								color: option.headNumBgTextColor
							}]">
							：
						</text>
						<view :style="[{
								backgroundColor: option.headNumBgTextColor,
								color: option.headNumTextColor
							}]">
							{{ minute }}
						</view>
						<text :style="[{
								color: option.headNumBgTextColor
							}]">
							：
						</text>
						<view :style="[{
								backgroundColor: option.headNumBgTextColor,
								color: option.headNumTextColor
							}]">
							{{ seconds }}
						</view>
					</view>
				</view>

				<text class="e-font-24" :style="[{
						color: option.headMoreTextColor
					}]">
					{{ $t('layout.更多') }}>
				</text>
			</view>

			<view :class="viewClass" :style="[viewBoxStyle]" v-if="option.layoutType == 2">
				<view class="overflow-hidd e-rela e-p-b-20"  :class="seckillLayoutClass"
					:style="[goodsStyle]" v-for="item in goodsList" :key="item.id">
					<view class="e-rela">
						<image mode="aspectFill" class="goods-img" :src="$fullLink(item.coverImg)"></image>
						<view class="e-abso sell-out-mask e-flex e-flex-xy-center" v-if="item.buyStock === item.stock">
							<view class="sell-out-box">
								<text class="e-font-24 c-white">{{ $t('seckill.bhz') }}</text>
							</view>
						</view>
					</view>
					<view class="components-seckill-label e-abso e-flex-xy-center" :style="[{
							color: option.buttonTextColor,
							backgroundColor: option.buttonBackgroundColor
						}]" v-if="option.buttonShow">
						<text>{{ option.buttonText }}</text>
					</view>
					<view class="goods-body e-rela" :style="[{ backgroundColor: option.goodsBackgroundColor }]">
						<view class="goods-title">
							<view class="e-line-2">
								{{ item.productName }}
							</view>
							<view class="" v-if="option.layoutType === 2">
								<view class="components-seckill-percentage" v-if="item.buyStock !== item.stock">
									<view class="bar"
										:style="[{ width: `${((item.stock - item.buyStock) / item.stock) * 100}%`, background: AppSkin.gradientPrimary }]">
									</view>
									<view class="e-font-20 c-white e-p-l-10 e-rela z-index2">
										{{ $t('seckill.only') }}{{ (((item.stock - item.buyStock) / item.stock) * 100).toFixed(0) }}%
									</view>
								</view>
								<view class="h-28" v-else></view>
							</view>
						</view>
						<view>
							<view class="price fw-500 c-red">
								<text>{{ $unitEn }}</text>
								<text>{{ item.price }}</text>
							</view>
						</view>
						<view class="components-seckill-button bg-primary text-center e-abso c-white e-font-26"
							v-if="item.buyStock !== item.stock" @tap="handleToGoodsInfo(item)">
							{{ $t('layout.购买') }}
						</view>
						<view class="components-seckill-button bg-grey c-white e-font-26 text-center e-abso" v-else>
							{{ $t('layout.购买') }}
						</view>
					</view>
				</view>
			</view>
			<scroll-view class="scroll" scroll-x="true" v-else :style="[viewBoxStyle]">
				<view class="overflow-hidd e-rela e-p-b-20" :class="seckillLayoutClass" :style="[goodsStyle]"
					v-for="item in goodsList" :key="item.id" @tap="handleToGoodsInfo(item)">
					<view class="e-rela">
						<image mode="aspectFill" class="goods-img" :src="$fullLink(item.coverImg)"></image>
						<view class="e-abso sell-out-mask e-flex e-flex-xy-center" v-if="item.buyStock === item.stock">
							<view class="sell-out-box">
								<text class="e-font-24 c-white">{{ $t('seckill.bhz') }}</text>
							</view>
						</view>
					</view>
					<view class="components-seckill-label e-abso e-flex-xy-center" :style="[{
							color: option.buttonTextColor,
							backgroundColor: option.buttonBackgroundColor
						}]" v-if="option.buttonShow">
						<text>{{ option.buttonText }}</text>
					</view>
					<view class="goods-body e-rela" :style="[{ backgroundColor: option.goodsBackgroundColor }]">
						<view class="goods-title">
							<view class="e-line-1">
								{{ item.productName }}
							</view>
						</view>
						<view>
							<view class="price fw-500 c-red">
								<text>{{ $unitEn }}</text>
								<text>{{ item.price }}</text>
							</view>
							<!-- 已废弃 -->
							<!-- <view class="c-placeholder" v-if="option.layoutType === 6">
								<text>{{ $t('seckill.only') }}{{ item.stock }}{{ $t('classify.件') }}</text>
							</view> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onBeforeUnmount } from 'vue'
	import { useLayoutCompoments, useLayoutGoodsCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { px2rpx } from './utils'
	import { getSeckillGoodsList } from '@/common/request/api'
	import type { SeckillGoodsItem } from '@/common/request/api'
	import { useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'

	const props = withDefaults(defineProps<{
		option : {
			// 样式风格
			styleType : 0 | 1 | 2
			//1自动获取商品 2手动添加的商品
			goodsType : 1 | 2
			// 商品列表
			goodsList : SeckillGoodsItem[]
			// 布局
			layoutType : 1 | 2 | 3 | 4 | 5 | 6 | 7
			//是否显示秒杀角标
			buttonShow : boolean
			//角标文字
			buttonText : string
			//角标文字颜色
			buttonTextColor : string
			//角标背景颜色
			buttonBackgroundColor : string
			//底部背景颜色
			backgroundColor : string
			//商品背景颜色
			goodsBackgroundColor : string
			//商品间距
			goodsMargin : number
			// 边距
			paddingTop : number
			paddingBottom : number
			paddingX : number
			// 圆角
			radiusTop : number
			radiusBottom : number
			// color头部显示背景色 img头部显示背景图片
			headType : 'color' | 'img'
			//头部背景颜色
			headBackgroundColor : string
			//头部背景图片
			headImage : string
			//头部标题文字
			headTitleText : string
			//头部标题文字颜色
			headTitleTextColor : string
			// 距离结束文字颜色
			headEndTextColor : string
			// 倒计时数字背景颜色
			headNumBgTextColor : string
			// 倒计时数字字体颜色
			headNumTextColor : string
			//“更多”文本字体颜色
			headMoreTextColor : string
			//商品数量
			goodsNumber : number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			goodsType: 1,
			goodsList: [],
			layoutType: 2,
			buttonShow: true,
			buttonText: '',
			buttonTextColor: "rgba(255, 255, 255, 1)",
			buttonBackgroundColor: "rgba(245,34,45,1)",
			backgroundColor: '',
			goodsBackgroundColor: "",
			goodsMargin: 7,
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 10,
			radiusTop: 5,
			radiusBottom: 5,
			headType: "color",
			headBackgroundColor: "rgba(255, 255, 255, 1)",
			headImage: "",
			headTitleText: '',
			headTitleTextColor: "rgba(48, 49, 51, 1)",
			headEndTextColor: "rgba(179, 179, 179, 1)",
			headNumBgTextColor: "rgba(245, 34, 45, 1)",
			headNumTextColor: "rgba(255, 255, 255, 1)",
			headMoreTextColor: "rgba(179, 179, 179, 1)",
			goodsNumber: 0
		})
	})

	const ctx = useCurrentInstance()
	const { AppSkin } = storeToRefs(useInit())

	const { bodyClass } = useLayoutCompoments(ctx, props.option)
	const { viewClass } = useLayoutGoodsCompoments<SeckillGoodsItem>(ctx, props.option)

	const seckillLayoutClass = computed(() => {
		return [
			bodyClass.value,
			props.option.layoutType === 2 ? 'components-seckill-layout' : `layout${props.option.layoutType}`,
		]
	})

	const viewBoxStyle = computed(() => {
		return { padding: props.option.layoutType === 6 ? '0 20rpx 30rpx 20rpx' : '0 20rpx' }
	})

	const goodsStyle = computed(() => {
		let margin
		let px = px2rpx(props.option.goodsMargin)
		if (props.option.layoutType < 3) {
			margin = { marginBottom: px }
		} else if (props.option.layoutType < 6) {
			margin = { margin: `0 ${px} ${px} ${px}` }
		} else {
			margin = { marginRight: px }
		}
		return { ...margin, '--margin': px, borderRadius: '10rpx' }
	})

	const headStyle = computed(() => {
		let background = {}
		if (props.option.headType === 'color') {
			background = {
				backgroundColor: props.option.headBackgroundColor
			}
		} else {
			background = {
				backgroundImage: `url(${ctx.$fullLink(props.option.headImage)})`,
				backgroundRepeat: 'no-repeat',
				backgroundSize: '100%'
			}
		}
		return {
			...background
		}
	})

	const backgroundColor = computed(() => {
		return {
			backgroundColor: props.option.backgroundColor
		}
	})

	const paddingX = computed(() => {
		return {
			padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)} ${px2rpx(props.option.paddingBottom)} ${px2rpx(
				props.option.paddingX
			)}`
		}
	})

	const borderRadius = computed(() => {
		return {
			borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusBottom)} ${px2rpx(
				props.option.radiusBottom
			)}`
		}
	})

	const goodsList = ref<SeckillGoodsItem[]>([])
	const hours = ref('')
	const minute = ref('')
	const seconds = ref('')

	let timer : any = null

	const layoutComponentsGetGoodsList = () => {

		if (props.option.goodsType === 2) {
			if (props.option.goodsList && props.option.goodsList.length > 0) {
				goodsList.value = props.option.goodsList
			} else {
				goodsList.value = []
			}
		} else {
			goodsList.value = []
			getSeckillGoodsList({ pageSize: props.option.goodsNumber, pageNum: 1 }).then(res => {
				if (res.code == 200) {
					goodsList.value.push(...(res.data?.rows || []))
				}
			})
		}

	}

	const handleToGoodsInfo = (item : SeckillGoodsItem) => {
		if (item.buyStock === item.stock) return
		ctx.$goTo('/pages/classify/goods/info/index', {
			id: item.productId,
			skuId: item.skuId
		})
	}

	const countDown = () => {

		timer = setTimeout(() => {
			const endTime = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
			const nowTime = new Date().getTime()
			let __surplus = endTime - nowTime
			if (__surplus < 0) {
				__surplus = 0
			}
			const result = parseInt(`${__surplus / 1000}`)
			let _hours = Math.floor((result / 3600) % 24)
			hours.value = _hours >= 10 ? `${_hours}` : '0' + _hours
			let _minute = Math.floor((result / 60) % 60)
			minute.value = _minute >= 10 ? `${_minute}` : '0' + _minute
			let _seconds = Math.floor(result % 60)
			seconds.value = _seconds >= 10 ? `${_seconds}` : '0' + _seconds
			countDown()
		}, 1000)

	}

	const _clearTimeout = () => {
		clearTimeout(timer)
		timer = null
	}
	countDown()
	layoutComponentsGetGoodsList()

	onBeforeUnmount(() => {
		_clearTimeout()
	})
</script>

<style scoped lang="scss">
	@import '@/components/list/css/layoutGoods.scss';
	@import '@/components/list/css/layoutCommon.scss';

	.components-seckill-head-box {
		padding: 24rpx;
		margin-bottom: 14rpx;

		text {
			line-height: 36rpx;
		}

		.components-seckill-head-title {
			line-height: 36rpx;
		}

		.components-seckill-time-box {
			margin-left: 24rpx;
			font-size: 24rpx;

			view {
				width: 34rpx;
				height: 36rpx;
				border-radius: 4rpx;
				line-height: 36rpx;
				margin-right: 6rpx;
			}
		}
	}

	.h-28 {
		width: 228rpx;
		height: 28rpx;
		margin-top: 20rpx;
	}

	.components-seckill-percentage {
		width: 228rpx;
		height: 28rpx;
		background: #f0f0f0;
		border-radius: 14rpx;
		margin-top: 20rpx;
		position: relative;

		.bar {
			position: absolute;
			left: 0;
			height: 28rpx;
			line-height: 28rpx;
			border-radius: 14rpx;
			padding-left: 10rpx;
			z-index: 1;
		}

		.z-index2 {
			z-index: 2;
		}
	}

	.components-seckill-button {
		width: 126rpx;
		padding: 8rpx 0;
		border-radius: 8rpx;
		right: 20rpx;
		bottom: 20rpx;
	}

	.bg-grey {
		background: #989898;
	}

	.components-seckill-label {
		width: 68rpx;
		height: 24rpx;
		border-radius: 12rpx 0 12rpx 0;
		font-size: 20rpx;
		left: 0;
		top: 0;

		text {
			transform: scale(0.8);
			font-size: 20rpx;
		}
	}

	.components-seckill-layout {
		flex: 1;
		display: flex;

		.goods-img {
			width: 240rpx;
			height: 240rpx;
		}

		.goods-body {
			flex: 1;
			padding: 20rpx;
			display: flex;
			flex-direction: column;

			.goods-title {
				flex: 1;
			}

			.goods-price {
				.scribe {
					display: inline-block;
				}
			}
		}
	}

	.sell-out-mask {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.5);

		.sell-out-box {
			background-color: rgba(0, 0, 0, 0.5);
			padding: 8rpx 32rpx;
			border-radius: 32rpx;
		}
	}
</style>